<template>
    <div class="scroll-wrapper" ref="scroll">
        <div class="scroll-content">
            <div class="pulldown-wrapper" v-if="pullDownRefresh">
                <div class="beforePulldown" v-show="beforePullDown">
                    <van-icon ref="brush" class="awrrow" :class="{'awrrow-down':isRotate}" name="brush-o" />
                </div>
                <div v-show="!beforePullDown">
                    <div v-show="isPullingDown">
                        <van-loading size="16px">加载中...</van-loading>
                    </div>
                    <div v-show="!isPullingDown">
                        为您推荐10条新数据
                    </div>
                </div>
            </div>
            <slot class="slot"></slot>
        </div>
    </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import PullDown from '@better-scroll/pull-down'
const TIME_STOP = 600
const TIME_BOUNCE = 800
export default {
    name:'',
    data(){
        return {
            isRotate: false,
            beforePullDown: true,
            isPullingDown: false
        }
    },
    props: {
        data: {
            type: Array,
            default: ()=> {
                return []
            }
        },
        probeType:{
            type: Number,
            default: 1
        },
        pullDownRefresh: {
            type: Object,
            default:null
        },
        listenScroll: {
            type: Boolean,
            default: false
        },
        refreshDelay: {
            type: Number,
            default: 20
        }
    },
    mounted() {
        setTimeout(()=> {
            this.initScroll()
        },20)
    },
    methods: {
        initScroll(){
            if(this.pullDownRefresh){
                BScroll.use(PullDown)
            }
            this.BScroll = new BScroll(this.$refs.scroll,{
                click: true,
                probeType: this.probeType,
                pullDownRefresh: this.pullDownRefresh,
            })
            if(this.pullDownRefresh){
                this.BScroll.on('pullingDown',this.handlePullingDown)
                this.BScroll.on('scroll',(pos)=> {
                    this.isRotate = pos.y >= (this.pullDownRefresh.threshold || 50) ? true : false
                })
            }
            if(this.listenScroll){
                this.BScroll.on('scroll',(pos)=> {
                    this.$emit('scroll',pos)
                })
            }
        },
        handlePullingDown(pos) {
            this.beforePullDown = false
            this.isPullingDown = true
            this.$emit('pulling-down')
        },
        finishPullDown() {
            this.isPullingDown = false
            const stopTime = TIME_STOP
            new Promise((resolve,reject)=> {
                setTimeout(() => {
                    this.BScroll.finishPullDown()
                    resolve()
                }, stopTime)
            }).then(()=> {
                setTimeout(() => {
                    this.beforePullDown = true
                    this.BScroll.refresh()
                }, TIME_BOUNCE)
            })

        },
        refresh() {
            this.BScroll && this.BScroll.refresh()
        },
        scrollTo(x,y,time) {
            this.BScroll && this.BScroll.scrollToElement(x,y,time)
        },
        scrollToElement(el,time) {
            this.BScroll && this.BScroll.scrollToElement(el,time)
        }
    },
    watch:{
        data(){
            setTimeout(()=> {
                this.refresh()
            },this.refreshDelay)
        }
    }

}
</script>

<style scoped lang="less">
    .scroll-wrapper{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        .pulldown-list{
            padding: 0;
            .list-item{
                padding: 10px 20px;
                list-style: none;
                background:#fff;
            }
        }
        .pulldown-wrapper{
            position: absolute;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            transform: translateY(-100%) translateZ(0);
            text-align: center;
            color: #999;
            .awrrow{
                transition: transform .3s;
                transform:rotateZ(0deg);
                font-size: 20px;
                &.awrrow-down{
                    transform:rotateZ(180deg);
                }
            }
        }
    }
</style>
